<script setup>
/**
 * @name 添加标题抽屉
 */
import {ref, reactive, computed} from 'vue'
import { PlusOutlined, LoadingOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import request from "@/common/utils/request";
import utils from '@/common/utils/utils.js'


const emit = defineEmits('updateDec:Array')
const state = reactive({
    visible: false,
    // 标题数组
    des: [],
})

const addDec = () => {
    state.des.push({
        des: '',
        id:state.des.length -1
    })

    console.log(state.des, '添加了一组');
    
}

const handleAIRequest = async (param = {}) => {
    const {useType, content, item } = param

    item.aiEditLoading = true
    let params = {
        content,
        num: 1,
        ai_type:'desc'
    }
    // 开启loading
    item.aiEditLoading = true
    try {
        let successRes = await request.post("/work_ai", "/user/filmrelease/ai/generate_title", params)
        
        if (!successRes || !successRes.result) throw new Error('AI扩写生成失败，状态id丢失')

        // 获取 改写_扩写 的结果
        const getStatusRes = async() => {
            const statusRes = await request.get(
                "/work_ai",
                "/user/filmrelease/ai/generate_title/status",
                { task_id: successRes.result }
            );

            const statusResult = statusRes?.result?.status
            if (statusResult == "error") throw new Error('AI扩写生成失败')

            if (statusResult == "success") {
                console.log(statusRes?.result, '生成的结果');
                if (useType == '改写') {
                    item.des = statusRes?.result?.data[0]
                } else {
                    state.des.push({
                        des: statusRes?.result?.data[0],
                        id:state.des.length -1
                    })
                    console.log(statusResult.des,'扩写之后????');
                }

                item.aiEditLoading = false
                return
            }
            await utils.delay(1000)
            getStatusRes()
        }
        getStatusRes()
        
    } catch (error) {
        item.aiEditLoading = false
    }
}

// 确定, 将编辑的内容 提交父组件 进行替换
const submit = () => {
    const des = state.des.map(ele => ele.des)
    emit('updateDec', des)
    close()
}


// 删除某项
const delItem = (index) => {
    state.des.splice(index, 1)    
}

const close = () => {
    state.visible = false
}
const open = (des) => {
    console.log(des, '抽屉接受到参数');
    state.des = des.map((ele,index) => {
        return {
            des: ele,
            id:index
        }
    })
    state.visible = true
}
defineExpose({
    close,open
})
</script>

<template>
        <a-drawer
    width="700px"
    :maskClosable="false"
    title="作品标题"
    :destroyOnClose="true"
    :visible="state.visible"
    @close="close"
    :bodyStyle="{ paddingRight: 0 }"
  >
  <div class="content">
      
      <div class="dec_list">
          <div class="dec_item" v-for="(item,index) in state.des" :key="index">
                <!-- loading -->
                <div class="content_loading_top" v-if="item?.aiEditLoading">
                    <LoadingOutlined />
                    <span class="loading_tips">AI创作中...</span>
                </div>
                <a-textarea class="textarea" :autoSize="{ minRows: 3, maxRows: 4 }"
                v-model:value="item.des" show-count :maxlength="1000"
                :bordered="false">
              </a-textarea>

              <div class="ai_edit_box">
                <div class="edit_left">
                    <a-tooltip placement="top">
                        <template #title>
                          <span>对当前内容进行改写</span>
                        </template>
                        <a-button size="small" type="link" @click="
                          handleAIRequest({
                              useType: '改写',
                              content: item.des,
                              item
                          })
                        "><cu-icon style="margin-right: 3px" type="icon-AIgaixie"></cu-icon>AI改写</a-button>
                      </a-tooltip>
      
                      <a-tooltip placement="top">
                        <template #title>
                          <span>对当前内容进行扩写一条</span>
                        </template>
                        <a-button size="small" type="link" @click="
                          handleAIRequest({
                              useType:'扩写',
                              content: item.des,
                              item
                          })
                        "><cu-icon style="margin-right: 3px" type="icon-iconkuoxie"></cu-icon>AI扩写</a-button>
                      </a-tooltip>
                </div>

                <div class="edit_right" >
                    <a-popconfirm title="确定删除此项吗？" @confirm="delItem(index)" ok-text="确定" cancel-text="取消">
                        <DeleteOutlined v-if="state.des.length > 1"/>
                    </a-popconfirm>
                </div>
              </div>
            </div>
        </div>

        <!-- 添加成片标题按钮 -->
        <a-button
          style="margin: 10px 0"
          block
          type="dashed"
          @click="addDec"
          ><PlusOutlined />添加作品标题</a-button
        >
    </div>

    <template #footer>
        <div style="display: flex; gap: 10px; justify-content: end;">
            <a-button @click="close" >取消</a-button>
            <a-button type="primary" @click="submit" >确认</a-button>
        </div>
    </template>

  </a-drawer>
</template>



<style lang="less" scoped>

// 去除 textarea 右侧滚动条
:deep(.ss-input-borderless){
    &::-webkit-scrollbar {
      display: none !important;
    }
}

.content{
    height: 100%;
    position: relative;

    .dec_list{
        .dec_item{
            border-radius: 8px;
            border: 1px solid #eee;
            padding: 10px;
            padding-bottom: 50px;
            position: relative;
            margin-bottom: 20px;

            .content_loading_top {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                left: 0;
                top: 0;
                background-color: #00000045;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                .loading_tips{
                    font-size: 17px;
                }
            }

            .ai_edit_box{
                width: 100%;
                position: absolute;
                bottom: 5px;
                left: 0px;
                padding: 0 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .edit_right{
                    font-size: 18px;
                    transition: all .3s;
                    cursor: pointer;
                    &:hover{
                        color: var(--ss-primary-color-hover);
                    }
                }
            }

        }
    }
}
</style>